<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @close="resetForm('form')"
    @cancel="handleCancel">

    <!-- 主表单区域 -->
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="span" >
          <a-form-model-item label="项目" prop="projectId">
            <j-search-select-tag v-model="model.projectId" dict="project_dict,project_name,isc" placeholder="请选择项目" />
          </a-form-model-item>
        </a-col>
        <a-col :span="span" >
          <a-form-model-item label="阶段" prop="stage">
            <j-dict-select-tag type="list" v-model="model.stage" dictCode="project_stage" placeholder="请选择阶段" />
          </a-form-model-item>
        </a-col>
        <a-col :span="span" >
          <a-form-model-item label="日期" prop="workdate">
            <a-date-picker v-model="model.workdate" placeholder="请输入日期" />
          </a-form-model-item>
        </a-col>
        <a-col :span="span" >
          <a-form-model-item label="工时" prop="worktime">
            <a-input v-model.number="model.worktime" placeholder="请输入工时" />
          </a-form-model-item>
        </a-col>
        <a-col :span="span" >
          <a-form-model-item label="备注" prop="remark">
            <a-input v-model="model.remark" placeholder="请输入备注" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>

<script>
import moment from 'moment/moment'
import { httpAction,postAction } from '@api/manage'

export default {
  name: "AddPeriodDetailModal",
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      span: 24,
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      model: {
        projectId: '',
        stage: '',
        workdate: moment(),
        worktime: 7,
        remark: '',
      },
      title:"",
      visible: false,
      disableSubmit: false,
      rules: {
        projectId: [
          { required: true, message: '请选择项目', trigger: 'change' },
        ],
        stage: [
          { required: true, message: '请选择阶段', trigger: 'change' }
        ],
        workdate: [
          { required: true, message: '请输入日期', trigger: 'change' }
        ],
        worktime: [
          {
            required: true,
            type:'number',
            min:0,max:24,
            message: '请输入工时0-24',
            trigger: 'blur',
          },
        ],
      },
      url: {
        add: "/tbPeriodsDetail/addform",
        hasRepeat: "/tbPeriodsDetail/hasRepeat"
      },
    }
  },
  methods: {
    // 点击关闭时清空form表格的数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    add () {
      this.visible = true
    },
    close () {
      this.$emit('close');
      this.resetForm('form')
      this.visible = false;
    },
    submitCallback(){
      this.$emit('ok');
      this.visible = false;
    },
    handleCancel () {
      this.close()
    },
    /** 整理成formData */
    classifyIntoFormData() {
      let main = Object.assign({
        projectId: this.model.projectId,
        stage: this.model.stage,
        },{
        tbTimesheetList:[{
          workdate: this.model.workdate,
          worktime: this.model.worktime,
          remark: this.model.remark,
        }]
      })
      return {
        ...main, // 展开
      }
    },
    /** 发起请求，自动判断是执行新增还是修改操作 */
    request(formData) {
      let url = this.url.add, method = 'post'
      if (this.model.id) {
        url = this.url.edit
        method = 'put'
      }
      this.confirmLoading = true
      console.log("formData===>",formData);
      httpAction(url, formData, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.close()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    /** 确定按钮点击事件 */
    handleOk() {
      let formData = this.classifyIntoFormData()
      let hasRepeat = false
      this.$refs.form.validate(valid => {
        if(valid) {
          postAction(this.url.hasRepeat,formData).then((res) => {
            if(res.success){
              hasRepeat = res.result
              if (hasRepeat) {
                this.$notification.open({
                  message: '提示',
                  description:
                    '该期间的工时表已经提交，请填报其他期间的工时表。',
                  onClick: () => {
                    console.log('Notification Clicked!');
                  },
                })
              } else {
                this.request(formData)
                this.close()
              }
            } else {
              this.$message.warning(res.message)
            }
          })
        }else {
          console.log('error submit!!')
          return false;
        }
      })

    },
  }
}
</script>

<style scoped>

</style>